<template>
	<view class="">
		<u-toast ref="uToast" />
		<u-search placeholder="请输入教室名" v-model="roomName" @search="search()" :show-action="false"></u-search>
		<u-card title="教室列表" margin="20rpx 30rpx 30rpx 20rpx">
			<view slot="body" v-for="(item,index) in roomList" :key="index" @click='chooseRoom(item._id,item.roomName)'>
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title ">
						<view class="">
							教室名：{{item.roomName}}
						</view>

						<view class="">
							剩余座位：{{(item.totalSeat-item.choosedSeat)}}
							<u-line-progress activeColor="#1989fa"
								:percent="parseInt(((item.totalSeat-item.choosedSeat)/item.totalSeat).toFixed(2)*100)"
								:striped-active="true" :striped="true"></u-line-progress>
						</view>
					</view>
				</view>
			</view>
		</u-card>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				roomName: '',
				roomList: [],
				loading: false,
			};
		},
		methods: {
			search() {
				console.log(111)
				this.initData()
			},
			//列表
			initData() {
				this.loading = true;
				uni.request({
						url: `http://192.168.2.149:3000/rooms/listRoom?page=&limit=&roomName=${this.roomName}`,
						method: "GET"
					})
					.then((res) => {
						console.log(res)
						if (res[1].data.status === "ok") {
							this.roomList = res[1].data.data;
							console.log(this.roomList, 444)
						} else {
							this.$refs.uToast.show({
								title: '获取信息失败',
								type: 'error',
								position: 'top',
							})
						}
						this.loading = false;
					})
			},
			//传递roomId、roomName
			chooseRoom(roomId,roomName){
				console.log(roomId,roomName,555)
				uni.navigateTo({
				      url:"../Seat/ChooseSeat?roomId="+roomId+"&roomName="+roomName 
				    })
			}
		},
		onLoad() {
			this.initData()
		},
		onReady(){
			this.initData()
		}
	}
</script>

<style scoped lang="scss">
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 150rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.height-50 {
		height: 100rpx;
	}
</style>
